import { defineComponent, ref, watch } from "vue";
import { CirclePlus, Delete } from "@element-plus/icons-vue";
import { DeleteTongYongMingDel, PostTongYongMingAdd } from "@/api/modules/zhenDuanJieGuo";
import { ElMessage, ElMessageBox } from "element-plus";
import { useZhenDuanJieGuo } from "@/stores/modules/zhenDuanJieGuo";
import { useHandleData } from "@/hooks/useHandleData";

interface jiBingType {
  JiBingID: string;
  JiBingMingCheng: string;
}
export default defineComponent({
  name: "JiBingLieBiao",
  setup() {
    const tableData = ref<any>([]);
    const columns: any = [
      {
        label: "序号",
        type: "index",
        width: "70"
      },
      {
        label: "疾病名称",
        prop: "JiBingMingCheng"
      },
      // {
      //   label: "疾病Id",
      //   prop: "JiBingID"
      // },
      {
        label: "操作",
        fixed: "right",
        width: "100",
        // slot: "caoZuo"
        cellRenderer: (scope: any) => (
          <>
            <el-tooltip className="box-item" effect="dark" content="删除" placement="top">
              <el-button type="primary" link icon={Delete} onClick={() => deleteAccount(scope.row)}></el-button>
            </el-tooltip>
          </>
        )
      }
    ];
    const handelMessage = (type: string, dataLs: any) => {
      ElMessageBox.prompt("", dataLs.title, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "请输入新的通用名称",
        inputValue: dataLs.inputValue,
        inputPattern: /^.+$/,
        inputErrorMessage: "不可以为空"
      }).then(({ value }) => {
        console.log(value, "value");
        if (type === "add") {
          let obj = {
            TongYongMingID: "",
            JiBingID: ""
          };
          PostTongYongMingAdd(obj).then((res: any) => {
            if (res.Success === 0) {
              useZhenDuanJieGuo().getTongYongMingJiBingSel();
              ElMessage({
                type: "success",
                message: `${dataLs.title}成功`
              });
            }
          });
        }
      });
    };
    const ElMessageBoxChange = (type: string) => {
      if (type === "add") {
        let obj = {
          title: "新增通用名称",
          inputValue: ""
        };
        handelMessage(type, obj);
      }
    };
    // 新增
    const onOpenAddRole = (type: string) => {
      ElMessageBoxChange(type);
    };
    // 删除事件
    const deleteAccount = async (row: Partial<jiBingType> = {}) => {
      let obj = {
        // todo 删除的ID 代办
        TongYongMingID: row.JiBingID
      };
      await useHandleData(DeleteTongYongMingDel, obj, `删除【${row.JiBingMingCheng}】`);
      await useZhenDuanJieGuo().getTongYongMingJiBingSel();
    };
    watch(
      () => useZhenDuanJieGuo().JiBingLieBiao,
      () => {
        tableData.value = useZhenDuanJieGuo().JiBingLieBiao;
      },
      {
        deep: true,
        immediate: true
      }
    );
    // 每一行的点击
    const tableDataClick = data => {
      console.log(data);
    };
    let tableLiving = () => {
      return (
        <pure-table
          ref="tableRef"
          maxHeight={300}
          row-key={row => row.tid}
          adaptive={true}
          border={true}
          align-whole="center"
          show-overflow-tooltip={true}
          data={tableData.value}
          columns={columns}
          className="pure-table"
          highlight-current-row={true}
          onRowClick={(data: any) => tableDataClick(data)}
        ></pure-table>
      );
    };
    return () => {
      return (
        <div className="JiBingLieBiao-main flex flex-col w-full h-full bg-white">
          <div className="JiBingLieBiao-main-search px-10 py-15 flex items-center justify-between">
            <div>
              <span className="JiBingLieBiao-main-search-span-ls text-lg font-extrabold leading-none text-[#239487]">|</span>
              <span className="JiBingLieBiao-main-search-span ml-5 text-[#239487]">通用名对疾病列表</span>
            </div>
            <el-button size="default" icon={CirclePlus} type="primary" onClick={() => onOpenAddRole("add")}>
              疾病对应通用名
            </el-button>
          </div>
          <div className="TongYongMing-table-button px-10"></div>
          <div className="JiBingLieBiao-main-table px-20 py-10 flex-1">{tableLiving()}</div>
        </div>
      );
    };
  }
});
